<template>
  <div class="langulage">
    <van-nav-bar
      :title="$t('person.language')"
      left-arrow
      @click-left="onClickLeft()"
    />
    <van-radio-group v-model="checked" class="check-list">
      <van-cell-group>
        <van-cell
          :title="item.name"
          clickable
          v-for="(item, index) in data"
          :key="index"
          @click="onChoose(item)"
        >
          <template #right-icon>
            <van-radio :name="item.value">
              <template #icon="props">
                <img
                  class="img-icon"
                  src="@/assets/images/person/tick.png"
                  v-if="props.checked"
                />
              </template>
            </van-radio>
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <div class="langulage-foot">
      <van-button
        type="primary"
        round
        width="244px"
        @click="onSubmit"
        :loading="subLoading"
        >{{ $t("sure") }}</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "@vue/reactivity";
import { Toast } from "vant";
import { onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter, useRoute } from "vue-router";
import usePoint from "@/hooks/usePoint.js";
import { onChange } from '@/lang/index'
const point = usePoint();
const router = useRouter();
const { locale } = useI18n();
let checked = ref("");
let subLoading = ref(false);
let data = reactive([
  // { name: "中文", value: 'zh-CN', key: "zh_CH" },
  { name: "English", value: 'en-US', key: "en_US" },
]);
const changeLanguage = (lang = 'zh-CN') => {
    onChange(lang)
    locale.value = lang
    //缓存到localStorage中下次进来还是切换后的语言
    localStorage.setItem('lang', lang)
    location.reload()
}

function onChoose(e) {
  checked.value = e.value
}
function onClickLeft() {
  
  history.back();
}
onMounted(() => {
  checked.value = localStorage.getItem('lang') || 'zh-CN'
  console.log("这个是语言默认选项", checked.value)
});

//确认语言
function onSubmit() {
  changeLanguage(checked.value)
  onClickLeft()
}
</script>

<style lang="less" scoped>
.langulage {
  background: #f6f6f6;
  height: 100%;
  .img-icon {
    width: 20px;
    height: 13px;
  }
  :deep(.van-cell-group.van-cell-group--inset) {
    margin: 0px;
  }
  :deep(.van-cell-group.van-hairline--top-bottom) {
    border-radius: 0px;
    padding: 0px;
  }
  &-foot {
    margin-top: 41px;
    text-align: center;
    button.van-button.van-button--primary.van-button--normal.van-button--round {
      width: 244px;
    }
  }
}
</style>